<template>
    <!-- 专栏主框 -->
    <div id="column">
        <!-- 编辑框页 -->
        <div id="edit-page">
            <!-- 编辑框 -->
            <div class="editor">
                <!-- 专栏封面 -->
                <div class="cover-box" @click="selectColumnCover()">
                    <input ref="theColumnCover" id="theColumnCover" class="input-upload-cover" enctype="multipart/form-data" 
                        type="file" name="filecover" multiple="multiple" accept="image/jpeg,image/jpg,image/png,image/bmp" 
                            @change="showColumnCover($event)">
                    <div class="no-img">
                        <img class="no-img" :src="columnCoverUrl" alt="" v-show="showCover">
                        <i class="icon-file-picture" v-show="showTip"></i>
                        <h4 class="no-img-item" v-show="showTip">请添加专栏封面图</h4>
                        <p class="tips" v-show="showTip">支持8MB内的JPG／JPEG／BMP／PNG格式的高清图片</p>
                        <p class="tips" v-show="showTip">（建议大于960*540像素）</p>
                    </div>
                    <!-- <el-upload
                    class="upload-demo"
                    :action="pictureAction"
                    ref="upload"
                    :headers="header"
                    :limit="1"
                    :before-upload="beforeUpload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="columnCover"
                    :auto-upload="false"
                    list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload> -->
                </div>
                <!-- 专栏内容框 -->
                <div class="content-box">        
                    <div class="content">
                        <!-- 专栏标题 -->
                        <div class="content-title" type="text">
                            <textarea class="content-title-text" maxlength=30 placeholder="请输入标题（建议30字以内）" v-model="columnTitle"></textarea>
                        </div>
                        <!-- 专栏内容编辑框 -->
                        <!-- <div class="content-editor">
                            <span>预览:</span>
                            <br>
                            <textarea class="content-editor-textarea" v-on="count()" cols="50" v-model="message" placeholder="请输入..."></textarea>
                        </div> -->
                            <!-- <editor class="content-editor"
                                v-model="editorText"
                                :options="editorOptions"
                                previewStyle="vertical"
                                height="500px"
                                mode="markdown"
                                @change="count"
                            /> -->
                            <quill-editor class="content-editor"
                                :options="editorOption"
                                v-model="editorText"
                                @change="editorContentCount($event)"
                            ></quill-editor>
                        <!-- 内容字数追踪 -->
                        <span>已输入{{contentCount}}字/1000字</span><span class="warning-tip" v-show="overContentLength">已达到字数上限！内容君撑不下了！</span>
                    </div>
                    <!-- 分割线 -->
                    <!-- <hr> -->
                    <div class="content-other">
                        <!-- 选择专栏分类 -->
                        <div class="block-wrap">
                            <h3>请选择专栏分类</h3>
                            <el-select v-model="category" clearable placeholder="请选择" >
                                <!-- @click="loadOptions()" -->
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <!-- 选择专栏标签 -->
                        <div class="block-wrap">
                            <h3>请添加标签</h3>
                            <ul class="tag-list">
                                <li class="add-item" v-for="(tag,index) in tagLi" :key="tag.index" @click="delTag(tag,index)">
                                    {{tag.tag}}
                                </li>
                            </ul>
                            <div>
                                <input type="text" maxlength="20" class="input-tag" @keydown.enter="keyDownEnter()" v-on="countInputTag()" v-model="tag" :style="{width:(this.tagCount)*15+'px'}">
                                <span class="tip">{{tip}}</span>
                            </div>
                        </div>
                        <!-- ui按钮 -->
                        <div class="ui-btn">
                            <el-button class="btn-submit" @click="submitColumn()"><span>提交文章</span></el-button>
                            <button class="btn-reset"><span>重置文章</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {setCookie,getCookie} from '../assets/js/cookie.js'

import icon_img from '@/../static/images/icon_img.png'

import VueQuillEditor, { Quill } from 'vue-quill-editor'
export default {
    mounted(){
        // this.count();
    },
    data(){
        return{
            message:"",
            userName:"",
            columnCoverUrl:'',
            showCover:false,
            showTip:true,
            header:{},
            columnCover:[],
            pictureAction:"http://localhost:8080/column/uploadColumn",
            columnTitle:"",
            contentCount:0,
            overContentLength:false,
            editorText:"",
            editorOption:{
                placeholder:'请在此输入内容...',
                modules:{
                    toolbar:[
                        ['bold', 'italic', 'underline', 'strike'],        // 切换文字效果按钮
                        ['blockquote', 'code-block'],

                        [{ 'header': 1 }, { 'header': 2 }],               // 切换标题大小
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'script': 'sub'}, { 'script': 'super' }],      // 上标/下标
                        [{ 'indent': '-1'}, { 'indent': '+1' }],          // 突出/缩进
                        [{ 'direction': 'rtl' }],                   // 文本方向

                        [{ 'size': ['small', false, 'large', 'huge'] }],  // 自定义下拉列表
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                        [{ 'color': [] }, { 'background': [] }],          // 具有来自主题的默认值的下拉列表
                        [{ 'font': [] }],
                        [{ 'align': [] }],

                        ['clean']       //清除所选内容的效果               
                    ]
                }
            },
            tag:"",
            tip:"点击回车Enter创建标签",
            tagCount:6,
            tagOrder:0,
            tagLi:[],
            tagLiOrder:-1,
            category:'',
            options:[
                {
                    value:'选项1',
                    label:'Java'
                },
                {
                    value:'选项2',
                    label:'C'
                },
                {
                    value:'选项3',
                    label:'Python'
                },
                {
                    value:'选项4',
                    label:'Spring'
                },
                {
                    value:'选项5',
                    label:'Android'
                },
                {
                    value:'选项6',
                    label:'生活'
                },
                {
                    value:'选项7',
                    label:'Game'
                },
                {
                    value:'选项8',
                    label:'运动'
                },
            ],
            column:[],
        }
    },
    methods:{
        tab(event){ 
            console.log(event)
            console.log(event.value)
            this.textTab
            console.log(event.value)
            event.returnValue = false;
        },
        // beforeUpload(file){
        //     let types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
        //     const isImage = types.includes(file.type);
        //     const isLtSize = file.size / 1024 / 1024 < 5;
        //     if (!isImage) {
        //         this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!');
        //         return false;
        //     }
        //     if (!isLtSize) {
        //         this.$message.error('上传图片大小不能超过 5MB!');
        //         return false;
        //     }
        //     return true;
        //     console.log("上传封面...")
        // },
        // handleRemove(file, fileList) {
        //     console.log('handleRemove:'+file, fileList);
        // },
        // handlePreview(file) {
        //     console.log('handlePreview'+file);
        // },
        selectColumnCover(){
            this.$refs.theColumnCover.click()
            console.log("你打开了input")
        },
        showColumnCover(e){
            this.showTip = false
            this.showCover = true
            console.log(e.target.files)
            let file = e.target.files[0]
            let url = ''
            var reader = new FileReader()
            reader.readAsDataURL(file)
            let that = this
            reader.onload = function(){
                url = this.result.substring(this.result.indexOf(',')+1)
                that.columnCoverUrl = 'data:image/png;base64,'+url
                console.log(that.columnCoverUrl)
            }
        },
        editorContentCount(event){
                event.quill.deleteText(1000,4)
                if(this.editorText == ""){
                    this.contentCount == 0
                }else{
                    if((event.quill.getLength() - 1) == 1000){
                        this.overContentLength = true
                    }else{
                        this.contentCount = event.quill.getLength() - 1
                        console.log("the content length:"+this.contentCount)
                        console.log("the content string:"+event.quill.getText())
                        console.log("the contents:"+this.editorText)
                        this.overContentLength = false
                    }
                }
        },
        countInputTag(){
             if(this.tag.length>6){
                this.tagCount = this.tag.length
                console.log("标签内容"+this.tag)
                console.log("标签控制长度"+this.tagCount)
            }else{
                this.tagCount = 6
            }
        },
        keyDownEnter(){
            if (!this.tag.match(/^\s+$/) && !this.tag.match(/^[ ]+$/) && !this.tag.match(/^[ ]*$/) && !this.tag.match(/^\s*$/)) {
                if(this.tagLi.length<5){
                    this.tagOrder=this.tagOrder+1;
                    this.tagLi.push({order:this.tagOrder,tag:this.tag})
                    console.log(this.tagLi)
                    console.log(this.tagLi[0].tag)
                    this.tag = ""
                }else{
                    this.tip = "已经5个啦，别再加啦"
                    console.log("已经5个啦，别再加啦")
                }
            } else {
                this.tip = "标签内必须有内容！"
                console.log("标签内必须有内容！")
            }
        },
        delTag(tag,index){
            console.log(tag,index)
            this.tagLi.splice(index,1)
            this.tagOrder = this.tagOrder - 1
            console.log(this.tagLi.indexOf(index))
            console.log(this.tagOrder)
            console.log(this.tagLi)
            this.tip = "点击回车Enter创建标签"
        },
        loadOptions(){
            console.log("options加载中...")
        },
        submitColumn(){
            console.log(this.column.length)
            if(this.column.length>0){
                this.column.splice(0,1,{cover:"",title:this.columnTitle,content:this.editorText,category:this.category},this.tagLi)
                console.log(this.column)
            }else{
                this.column.push({cover:"",title:this.columnTitle,content:this.editorText,category:this.category},this.tagLi)
                console.log(this.column)
                console.log(this.columnCover)
                console.log(this.tagLi)
                //得到封面图
                var fileM=document.querySelector("#theColumnCover")
                var formData = new FormData();
                var fileObj=fileM.files[0]
                formData.append('userName',this.userName)
                formData.append('articleTitle',this.columnTitle)
                formData.append('articleContent',this.editorText)
                formData.append('articleCategory',this.category)
                formData.append('columnCover',fileObj)
                formData.append('tag1Name',this.tagLi[0].tag)
                formData.append('tag2Name',this.tagLi[1].tag)
                formData.append('tag3Name',this.tagLi[2].tag)
                formData.append('tag4Name',this.tagLi[3].tag)
                formData.append('tag5Name',this.tagLi[4].tag)
                console.log(fileObj)
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }
                console.log(formData.getAll('columnArticle'))
                console.log(formData.getAll('columnCover'))
                axios.post('http://localhost:8080/column/uploadColumn',formData).then(res=>{
                    console.log(config)
                    console.log(res)
                    if(res.data == 1){
                        console.log("专栏文章上传成功！(●'◡'●)")
                    }
                })
                // this.$refs.upload.submit()
            }
        }
    }
}
</script>

<style scoped>
body{
    text-align: center;
}
#column{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
#edit-page{
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.editor{
    margin: 0 auto;
    width: 70%;
    height: 100%;
    border: 2px 2px 2px 2px;
}
.cover-box{
    margin:50px auto;
    width: 100%;
    height: 240px;
    text-align: center;
    overflow: hidden;
}
.input-upload-cover{
    display: none;
}
.no-img{
    margin: 0 auto;
    width: 100%;
    height: 240px;
    color: #99a2aa;
    background-color: #FAFBFD;
    text-align: center;
}
.no-img:hover{
    background-color:#EBEEF2;
}
.icon-file-picture{
   font-size: 80px;
}
.content-box{
    margin:0 auto;
    width: 100%;
    height: 700px;
}
.content{
    width: 100%;
    height: 100%;
}
.content-title{
    margin: 0 auto;
    width: 100%;
    height: 50px;
}
.content-title-text{
    outline: none;
    margin: 10px 30px 10px 10px;
    width: 100%;
    height: 50px;
    border: none;
    overflow: hidden;
    font-size: 40px;
    color: darkgray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 800;
}
.editor-toolbar{
    width: 95%;
    height: 50px;
    display: flex;
    background-color:#EBEEF2;
}
.editor-toolbar li{
    height: 50px;
    width: 50px;
    font-size: 20px;
    list-style: none;
    text-align: center;
    line-height: 50px;
}
.editor-toolbar li:hover{
    color: deepskyblue;
}
.content-editor{
    margin: 30px auto;
    width: 100%;
    height: 500px;
}
.warning-tip{
    color: rebeccapurple;
    margin: 0px 0px 0px 30px;
}
/* .content-preview{
    width: 100%;
    height: 400px;
} */
.content-editor-textarea{
    width: 100%;
    height: 400px;
}
.block-wrap{
    height: 120px;
}
.tag-list{
    list-style: none;
    height: 40px;
}
.add-item{
    float: left;
    margin: 10px 10px 10px 10px;
    text-align: center;
    line-height: 30px;
    /* width: 60px; */
    height: 30px;
    border: 1px solid deepskyblue;
    border-radius: 5px;
    color: white;
    font-size: 15px;
    background-color: deepskyblue;

}
.add-item:hover{
    border: 1px solid darkgray;
    border-radius: 5px;
    color: white;
    text-decoration:line-through;
    font-size: 15px;
    background-color: darkgray;
}
.input-tag{
    /* 去掉input选中时的蓝框 */
    outline: none;
    width:80px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 20px;
    border:1px solid #ccd0d7;
    text-align: center;
}
.tip{
    font-size: 12px;
    color: #ccd0d7;
}
.ui-btn{
    margin: 50px 50px 50px 50px;
    text-align: center;
}
.btn-submit{
    outline: none;
    width: 140px;
    height: 42px;
    line-height: 42px;
    border: 1px solid cornflowerblue;
    border-radius: 50px;
    margin: 0 35px 0 5px;
    padding: 0;
    color: white;
    background-color: cornflowerblue;
}
.btn-reset{
    outline: none;
    width: 140px;
    height: 42px;
    line-height: 42px;
    border: 1px solid cornflowerblue;
    border-radius: 50px;
    margin: 0 35px 0 5px;
    padding: 0;
    color: white;
    background-color: cornflowerblue;
}
.btn-submit:hover{
    border: 1px solid deepskyblue;
    background-color:deepskyblue;
}
.btn-reset:hover{
    border: 1px solid deepskyblue;
    background-color:deepskyblue;
}
</style>